<template>
    <div class="systemInfo">
        <div class="systemHeader">
            <Row>
                <Col :xs="24" :sm="6" :md="3" :lg="2">
                <div class="systemTop">
                    <Button type="primary" class="systemStatus" @click="showAddForms = true"><i class="ivu-icon ivu-icon-plus systemIonic"></i>新增</Button>
                    <!--<Button type="warning" @click="showEdit('')"><i class="ivu-icon ivu-icon-edit systemIonic"></i>编辑</Button>-->
                </div>
                </Col>
                <Col :xs="12" :sm="7" :md="7" :lg="3">
                <div class="systemList">
                    <Select v-model="model1" placeholder="请选择系统名称"  >
                        <Option v-for="(item,index) in systemName" :value="item.value" :key="item.value">{{ item.sysName }}</Option>
                    </Select>
                </div>
                </Col>
                <Col :xs="12" :sm="9" :md="7" :lg="10">
                <div class="systemSearch">
                    <Button type="success" icon="ios-search">搜索</Button>
                </div>
                </Col>
            </Row>
        </div>
        <div class="systemContent">
            <div class="systemMain">
                <Row>
                    <Col span="24">
                    <Table border ref="selection" :columns="funData" :height="tabHeight"  @on-select="onSelect" @on-selection-change="selectInfo" :data="data1"></Table>
                    </Col>
                </Row>

            </div>
        </div>
        <!--分页-->
        <div class="sysPage">
            <Page :total="100" show-sizer></Page>
        </div>

        <!--//弹框-->
        <addFun  :showAddForm="showAddForms" @reset="cancelModal"></addFun>
        <editFun :showEditForm="showEditForms" :data="rowDataInfo[0]" @reset="cancelModal"></editFun>

    </div>
</template>

<script>
    import util from '../../libs/util'
    import addFun from '../../modal/fun/addFun.vue'
    import editFun from '../../modal/fun/editFun.vue'
    export default {
        name: '',
        data () {
            return {
                showAddForms:false,
                showEditForms:false,
                tabHeight: window.innerHeight - 315, // 计算tab的高度
                rowDataInfo:[], //存储复选框选中的数据
                systemName: [
                    {
                        value: 'xuanz',
                        sysName: '请选择系统名称'
                    },
                    {
                        value: 'zg',
                        sysName: '租管'
                    },
                    {
                        value: 'jr',
                        sysName: '金融'
                    },
                    {
                        value: 'zhzx',
                        sysName: '账户中心'
                    },
                    {
                        value: 'jszx',
                        sysName: '结算中心'
                    }
                ],
                model1: '',
                funData: [
                    {
                        title: '系统名称',
                        key: 'funSysName'
                    },
                    {
                        title: '所属一级菜单',
                        key: 'funLevelMenu'
                    },
                    {
                        title: '所属二级菜单',
                        key: 'funLevelTwoMenu'
                    },
                    {
                        title: '功能名称',
                        key: 'funName'
                    },
                    {
                        title: '功能关键字',
                        key: 'funKeyword'
                    },
                    {
                        title: '功能描述',
                        key: 'funDescribe'
                    },
                    {
                        title: '操作',
                        key: 'funOperation',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showEdit(params)
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
                data1: [
                    {
                        funSysName: '租管',
                        funLevelMenu: '房源管理',
                        funLevelTwoMenu: '房源列表',
                        funName:'添加房源信息',
                        funKeyword:'addDesc',
                        funDescribe:'新增房源描述'
                    },
                    {
                        funSysName: '租管2',
                        funLevelMenu: '房源管理',
                        funLevelTwoMenu: '房源列表',
                        funName:'添加房源信息',
                        funKeyword:'addDesc2',
                        funDescribe:'新增房源描述'
                    },
                    {
                        funSysName: '租管',
                        funLevelMenu: '房源管理',
                        funLevelTwoMenu: '房源列表',
                        funName:'添加房源信息',
                        funKeyword:'addDesc',
                        funDescribe:'新增房源描述'
                    },
                    {
                        funSysName: '租管',
                        funLevelMenu: '房源管理',
                        funLevelTwoMenu: '房源列表',
                        funName:'添加房源信息',
                        funKeyword:'addDesc',
                        funDescribe:'新增房源描述'
                    },
                    {
                        funSysName: '租管',
                        funLevelMenu: '房源管理',
                        funLevelTwoMenu: '房源列表',
                        funName:'添加房源信息',
                        funKeyword:'addDesc',
                        funDescribe:'新增房源描述'
                    }
                ]
            }
        },
        components: {
            addFun,
            editFun
        },
        created() {
//            console.log(this.systemName)

        },
        methods: {
            onSelect(selection,row) {
//                console.log(selection)
//                console.log(row)

            },
            selectInfo(selection) {
                this.rowDataInfo = selection
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            cancelModal() {
                this.showAddForms = false
                this.showEditForms = false
            },
            showEdit(params) {
                this.$refs.selection.selectAll(false); // 取消所有项并且清空其绑定的数据
                this.showEditForms = true
                this.rowDataInfo.push(params.row);
            }
        }
    }
</script>


<style scoped>
    .systemHeader{
        margin-bottom: 15px;
        margin-top: 5px;
    }
    .systemStatus{
        margin-right: 20px;
    }
    .systemIonic{
        padding-right:5px;
    }
    .systemSearch{
        margin-left: 10px;
    }
    .sysPage{
        padding: 20px 0;
        text-align: right;
    }
</style>
